<template>
  <view class="page pageBg-color">
    <list-taoShow :dataList="dataList" :isLoading="isLoading" :isHasMore="isHasMore" :isEmpty="isEmpty" />

    <com-backTop :fixed="fixed"></com-backTop>
  </view>
</template>


<script lang="ts" setup>
import { ref } from 'vue';
import { onLoad, onPullDownRefresh, onReachBottom, onPageScroll } from '@dcloudio/uni-app';
import { API } from "@/services/api";

const dataList: any = ref([]); // 数据列表
const page = ref(1); // 页码
const isLoading = ref(false); // 加载状态
const isHasMore = ref(false); // 是否有更多数据可加载
const isEmpty = ref(true); // 数据是否为空

const fixed = ref(false); // 刷新、返回顶部 按钮的显示

// 
onLoad(() => {
  getData();
});

// 
onPullDownRefresh(() => {
  onRefresh();
});

// 
onReachBottom(() => {
  if (isHasMore.value) getData();
});

// 
onPageScroll((e) => {
  fixed.value = e.scrollTop > 200;
});

// 
const onRefresh = () => {
  dataList.value = [];
  page.value = 1;
  getData();
};

// 
const getData = () => {
  isLoading.value = true;

  API.taoShow(page.value, 12)
    .then((res: any) => {
      console.log(`~~~获取 page = ${page.value} 的数据`);
      let newList = [...dataList.value];
      if (page.value === 1) newList = [];
      dataList.value = newList.concat(res.data || []);
      isLoading.value = false;
      isHasMore.value = res.data && res.data.length >= 12;
      isEmpty.value = dataList.value.length <= 0;
      page.value++;
    })
    .catch(() => {
      isLoading.value = false;
      isHasMore.value = false;
      isEmpty.value = true;
    })
};

</script>


<style lang="scss" scoped>
@use "style.scss";
</style>